<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代办事项2</title>
</head>
<body>
    <div class="nav">
        <input type="text" style="text-indent: 8px;">
        <button>新建任务</button>
    </div>
    <!-- 上面这一块内容的居中是依靠 设置宽度,然后div内居中挤过来的 -->

    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox">
                <span>吃饭</span>
                <button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>

    <script>
        // 新增任务
        var addTaskButton = document.querySelector('.nav button');
        console.log(addTaskButton);
        addTaskButton.onclick = function(){
            // 1. 获取到任务内容的输入框
            var input = document.querySelector('.nav input');
            console.log(input);
            // 2. 获取到输入框内容
            var taskContent = input.value;
            console.log("输入框的内容是："+input.value);
            // 3. 根据内容新建一个元素节点
            var row = document.createElement('div');
            row.className = 'row';
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            var span = document.createElement('span');
            span.innerHTML = taskContent;
            var button = document.createElement('button');
            button.innerHTML = '删除';
            
            // 创建好了之后，将这些元素插入到DOM树中
            row.appendChild(checkbox);
            row.appendChild(span);
            row.appendChild(button);
            // 4. 把新节点插入到todo中
            var todo = document.querySelector('.todo');
            todo.appendChild(row);
            input.value = "";

            // 每次新增后，都重新获取一下 checkboxs对象
            checkboxs = document.querySelectorAll('.container input');
            console.log(checkboxs);
        }

        // 然后给checkbox注册点击事件   这个有点难办，因为你需要把所有的checkbox都检查一遍，你不知道
        // 哪个checkbox会被点击

        var checkboxs = document.querySelectorAll('.container input');
        for(var i=0; i< checkboxs.length;i++){
                checkboxs[i].onclick = function (){
                var row = this.parentNode;
                // 注意！ 是先出发checkd为true， 然后再调用onclick函数
                console.log(row);
                console.log(this);
                console.log(this.checked);
                if(this.checked){
                    var target = document.querySelector('.done');
                } else {
                    var target = document.querySelector('.todo');
                }
                target.appendChild(row);
            }
        }

        // 6. 给删除按钮注册点击事件
        
        button.onclick = function(){
            var row =this.parentNode;
            var grandParent = row.parentNode;
            grandParent.removeChild(row);
        }



    </script>

    <style>
        .todo,
        .done {
            width: 50%;
            height: 100%;
        }
        .container h3 {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #333;
            color: #fff;
        }
        .row button {
            width: 50px;
            height: 40px;
        }
        .row span {
            width: 300px;
        }
        .row input {
            margin: 0 10px;
        }
        .row {
            height: 50px;
            display: flex;        
            align-items: center;    
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 800px;
            margin: 0 auto;
            display: flex;
        }
        .nav button {
            width: 200px;
            height: 50px;
            border: none;
            background-color: orange;
            color: white;
        }
        .nav input{
            width: 600px;
            height: 50px;
        }
        .nav {
            margin: 0 auto;
            width: 800px;
            height: 100px;
            display: flex;
            align-items: center;
        }
    </style>

    
</body>
</html>